<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@page import="com.cap.bts.framework.usermgnt.constant.EmployeeStatus"%>    
      
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>会员卡库存信息</title>
<%@include file="../include/include.jsp"%>
<link rel="stylesheet" type="text/css" href="${csspath }/public.css"/>
<link rel="stylesheet" type="text/css" href="${csspath }/datepicker.css"/>
<link rel="stylesheet" type="text/css" href="${csspath }/style_l.css"/>
<script type="text/javascript" src="${jspath }/jquery-1.4.4.js"></script>
<script type="text/javascript" src="${jspath }/jquery.ui.min.js"></script>
<script type="text/javascript" src="${jspath }/ui.datepicker_zh-CN.js"></script>
<script type="text/javascript" src="${jspath }/jquery.blockUI.js"></script>
<script type="text/javascript" src="${jspath }/public.js"></script>
<script type="text/javascript" src="${jspath }/jquery.selectAll.js"></script>
<script type="text/javascript" src="${jspath}/jquery/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="${jspath}/jquery/jquery.alerts.js"></script>
<script type="text/javascript" src="${jspath}/load_layer.js"></script>
<script type="text/javascript" src="${jspath}/yui/yui/yui-min.js"></script>
<link rel="stylesheet" type="text/css" href="${csspath}/jquery.alerts.css" />

<link rel="stylesheet" type="text/css"
	href="${webcontext}/css/validationEngine.jquery.css" />
<script src="${jspath}/jquery/validate/jquery.validationEngine.js"
	type="text/javascript"></script>
<script src="${jspath}/jquery/validate/jquery.validationEngine-zh.js"
	type="text/javascript"></script>
	<script type="text/javascript"
	src="${webcontext}/javascript/jquery/jquery.ui.draggable.js"></script>
	<link rel="stylesheet" type="text/css"
	href="${bootstrapPath}/css/bootstrap.css" />
<script type="text/javascript" src="${bootstrapPath}/js/bootstrap.js"></script>
<style type="text/css">
html, body {
	overflow: auto;
}
#mychart { 
    margin:10px 10px 10px 10px; 
    width:90%;
    max-width: 800px;
    height:400px;
}
</style>

<script type="text/javascript">
 $(function(){ 
	var myDataValues;
	var myMaxDataValues;
	var myKeyValues;
	$.ajax({
		type:'POST',
		url: '${webcontext}/crmdp/dealer/report/loadCardNames',
		async: false,
		data : $('#startDate').serialize(),
		//contentType: "application/x-www-form-urlencoded; charset=utf-8",
		success : function(data) {
			if(data){
				data=decodeURI(data);
				myKeyValues=eval(data);
			}else{
				alert("wrong");
			}
		}
	}) ;
	$.ajax({
		type:'POST',
		url: '${webcontext}/crmdp/dealer/report/loadChartInventoryPage',
		async: false,
		data : $('#startDate').serialize(),
		//contentType: "application/x-www-form-urlencoded; charset=utf-8",
		success : function(data) {
			if(data){
				data=decodeURI(data);
				myDataValues=eval(data.split("-MAXDATA-")[0]+"]");	
				myMaxDataValues=eval(data.split("-MAXDATA-")[1].split("]")[0]);
				YUI().use('charts-legend', function (Y)
						{
				     //Define our axes for the chart.
				    var myAxes = {
				        sellQty:{
				            keys:myKeyValues,
				            position:"left",
                            maximum:myMaxDataValues,
                            minimum:0,
				            type:"numeric"
				        },
				        dateRange:{
				            keys:["日期"],
				            position:"bottom",
				            type:"category",
				            styles:{
				                majorTicks:{
				                    display: "none"
				                },
				                label: {
				                    rotation:-30,
				                    margin:{top:5}
				                }
				            }
				        }
				    };
						    var myChart = new Y.Chart({
						                        legend: {
						                            position: "right",
						                            width: 300,
						                            height: 300,
						                            styles: {
						                                hAlign: "center",
						                                hSpacing: 4
						                            }
						                        },
						                        axes: myAxes,
						                        dataProvider:myDataValues,
						                        render:"#mychart",
						                        interactionType:"planar",
						                        horizontalGridlines:true,
						                        verticalGridlines:true,
						                        styles:{
						                        	lineWeihgt:1
						                        }
						                    });
						});
			}else{
				alert("wrong");
			}
		}
	}) 
	
}); 
function backToSearch(){
	 window.location.href ="${webcontext}/crmdp/dealer/report/backToInventoryPage";
} 
function chart(){
	info_form.action="${webcontext}/crmdp/dealer/report/toChartInventoryPage";
	document.getElementById("info_form").submit();
}
</script> 
</head>
<body>
	<!-- content -->
		<div id="wrap" style="width:75%;margin-top: 10px;margin-left: 10px;">
	<form:form id="info_form"  class="form-horizontal" method="post" modelAttribute="dto">
				<input type="hidden" name="dealerId" value="${param.dealerId}">
		<div class="row" style="margin-left: auto;margin-right: auto;">
				<div class="form-group" style="text-align: center;">
					<label class="col-sm-2 control-label" for="transactionStartDate">起始日期</label>
					<div class="col-sm-2">
						<input name="transactionStartDate" class="form-control input-sm validate[length[0,100]] date" id="startDate" type="text"
							 value="${dto.transactionStartDate}" />
					</div>
					<label for="transactionEndDate" class="col-sm-2 control-label">结束日期</label>
					<div class="col-sm-2">
					 	<input  name="transactionEndDate" class="form-control input-sm validate[length[0,100]] date" id="endDate" type="text" 
						 value="${dto.transactionEndDate}" />
					</div>
				    <core:if test="${sessionScope.FROM_MARS_FLAG}">
					<label for="hierarchy" class="col-sm-2 control-label">查看门店</label>
					<div class="col-sm-2">
				       	<form:select path="hierarchy" cssClass="form-control" id="hierarchy" style="width:150px">
				       	<form:option value="1">所有门店</form:option>
						    <core:forEach items="${dealerList}" var="dealerList">
					           <form:option value="${dealerList}">${dealerList}</form:option>
      						</core:forEach>
						</form:select>
					</div>
                    </core:if>
				</div>
	</div>
		<div class="row" style="text-align: center; margin-top: 10px;">
						<button type="button" class="btn" value="查询 " onclick="chart()">
						<i class="glyphicon glyphicon-stats" style="color:#FFFFFF"></i>&nbsp;查询</button>
					    <button type="button" class="btn btn-success" value="返回" onclick="backToSearch()">
	    				<i class="glyphicon glyphicon-share-alt" style="color:#FFFFFF"></i>&nbsp;返回 </button>
				</div>
		<div id="mychart"></div>
	</form:form>
		</div>
	<!-- content -->
	
  </body>
</html>